<template>
    <el-table-column v-if="!header.children" :prop="header.prop" :label="header.label" :width="header.width"
        :align="header.align || 'center'" header-align="center" :show-overflow-tooltip="true" :sortable="header.sort"
        :formatter="header.formatter"
        :fixed="header.fixed"
        v-bind="header.elColumnProperty"
        >
        <template #header="scoped" v-if="header.headerSlot">
            <slot :name="'header_'+header.prop" :data="scoped"></slot>
        </template>
        <template #default="scoped">
            <template v-if="header.isSlot">
                <slot :name="header.prop" :data="scoped"></slot>
            </template>
            <template v-else>
                <row-input
                    v-if="header.edit && scoped.row.isEdit && scoped.column.isEdit && type.includes(header.type)"
                    v-model:value="scoped.row[scoped.column.property]"
                    :data="scoped"
                    :header="header"
                    :options="header?.options"
                    @changed="changed"
                   >
                </row-input>
                <span v-else  @click="header.click ? header.click(scoped.row, header, scoped.row[scoped.column.property], scoped.$index) : ''" v-html="header.formatter ? header.formatter(scoped.row,header, scoped.row[scoped.column.property],scoped.$index) : `<span>${scoped.row[scoped.column.property] || ''}</span>`"></span>
            </template>
        </template>
    </el-table-column>
    <el-table-column v-else :label="header.label" :align="header.align || 'center'" header-align="center">
        <table-column v-for="item in header.children" :key="item.prop" :data="item" @changed="changed">
            <template v-for="(item, key) in $slots" :key="item" #[key]="scoped">
                <slot :name="key" :data="scoped.data"></slot>
            </template>
        </table-column>
    </el-table-column>
</template>
<script setup>
import TableColumn from "./TableColumn";
import RowInput from "./RowInput.vue";
import { defineProps, getCurrentInstance, defineEmits, watchEffect, computed } from 'vue'
const type = ['input', 'select','date']
const props = defineProps(['data'])
const emits = defineEmits(['changed'])
const changed = (scoped) => {
    console.log(11,scoped)
    emits('changed', scoped)
}
const inst = getCurrentInstance()
const header = computed(() => props.data)
const slots = inst.slots
defineExpose({
    inst,
    slots
})
</script>
    
<style scoped></style>